home *** CD-ROM | disk | FTP | other *** search
/ Enter 2002 November / EnterCD 11_2002.iso / Internet / Amaya 6.4 / Windows NT.exe / _SETUP.1 / creating_graphics_with_the_palette.html.de < prev    next >
Encoding:
Extensible Markup Language  |  2002-09-13  |  7.6 KB  |  189 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.   <meta name="generator" content="amaya 6.1, see http://www.w3.org/Amaya/" />
  6.   <title>Grafiken mit der Palette erzeugen</title>
  7.   <style type="text/css">
  8.   </style>
  9.   <link href="../style.css" rel="stylesheet" type="text/css" />
  10. </head>
  11.  
  12. <body xml:lang="de" lang="de">
  13.  
  14. <table border="0" cellspacing="5" cellpadding="5">
  15.   <tbody>
  16.     <tr>
  17.       <td><img alt="W3C" src="../../images/w3c_home" /> <img alt="Amaya"
  18.         src="../../images/amaya.gif" /></td>
  19.       <td><a href="working_with_graphics.html.de" accesskey="p"><img
  20.         alt="vorherige Seite" src="../../images/left.gif" /></a> <a
  21.         href="../SVG.html.de" accesskey="t"><img alt="erste Seite"
  22.         src="../../images/up.gif" /></a> <a href="moving_graphics.html.de"
  23.         accesskey="n"><img alt="nΣchste Seite" src="../../images/right.gif"
  24.         /></a></td>
  25.     </tr>
  26.   </tbody>
  27. </table>
  28.  
  29. <div id="page_body">
  30. <h1>Grafiken mit der Palette erzeugen</h1>
  31.  
  32. <p>Um ein neues SVG-Element zu erzeugen, den Cursor an die Stelle plazieren,
  33. wo die Grafik eingefⁿgt werden soll und den Knopf <strong>Grafik</strong>
  34. <img src="../../images/Graph.gif" alt="Knopf Grafik" /> in der Knopfleiste
  35. anklicken. Es wird eine Palette von grafischen Elementen angezeigt:</p>
  36.  
  37. <p><img alt="Palette Grafik" src="../../images/graphics_palette-de.png" /></p>
  38.  
  39. <p>Diese bleibt solange ge÷ffnet, bis man den Knopf <strong>Beenden</strong>
  40. anklickt.</p>
  41.  
  42. <p>Folgende grafischen Elemente stehen zur Verfⁿgung:</p>
  43. <ul>
  44.   <li>Linie (<code>line</code>)
  45.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  46.       <line y1="3px" x1="0px" x2="17px" y2="20px" style="stroke: #B20000"
  47.             stroke="#B20000"/>
  48.     </svg>
  49.     </p>
  50.   </li>
  51.   <li>Rechteck (<code>rect</code>) ohne die Attribute <code>rx</code> und
  52.     <code>ry</code>
  53.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  54.       <rect x="6px" width="22px" height="18px"
  55.             style="fill: #FFCB69; stroke: #0071FF" stroke="#0071ff"/>
  56.     </svg>
  57.     </p>
  58.   </li>
  59.   <li>gerundetes Rechteck (<code>rect</code>)
  60.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  61.       <rect rx="6px" stroke="#4c00e5" width="23px" height="18px"
  62.             style="fill: #E5E500; stroke: #4C00E5" x="9px" y="2px"/>
  63.     </svg>
  64.     </p>
  65.   </li>
  66.   <li>Kreis (<code>circle</code>)
  67.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  68.       <circle cy="13px" cx="20px" r="10px"
  69.               style="fill: #C1FFE9; stroke: #FF0000" stroke="#ff0000"/>
  70.     </svg>
  71.     </p>
  72.   </li>
  73.   <li>Ellipse (<code>ellipse</code>)
  74.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="1cm">
  75.       <ellipse cy="14px" cx="20px" rx="15px" ry="10px"
  76.             style="fill: #B795FF; stroke: #000000" stroke="#000000"/>
  77.     </svg>
  78.     </p>
  79.   </li>
  80.   <li>offenes Polygon (<code>polyline</code>)
  81.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  82.       <polyline points="4,16 23,0 37,16 55,6" stroke="#0000b2"
  83.                 style="stroke: #0000B2; fill: #FFA069"/>
  84.     </svg>
  85.     </p>
  86.   </li>
  87.   <li>geschlossenes Polygon (<code>polygon</code>)
  88.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.7cm">
  89.       <polygon points="2,16 15,0 28,12 45,4 46,16 17,16 14,11"
  90.                stroke="#000000" style="fill: #C8FF95; stroke: #000000"/>
  91.     </svg>
  92.     </p>
  93.   </li>
  94.   <li>offene Kurve (<code>path</code>)
  95.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  96.       <path stroke="blue" fill="none"
  97.             d="M 0,16 C 0,15 4,6 9,7 C 13,7 12,16 16,16 C 20,15 24,1 22,0"
  98.             style="stroke: #0071FF" stroke-width="2px"/>
  99.     </svg>
  100.     </p>
  101.   </li>
  102.   <li>geschlossene Kurve (<code>path</code>)
  103.     <p><svg xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  104.       <path stroke="black" fill="none"
  105.             d="M 14,4 C 11,4 8,0 6,1 C 3,1 1,4 1,7 C 0,9 2,12 5,14 C 7,15 13,14 16,14 C 17,13 21,12 23,11 C 24,9 29,7 29,4 C 28,1 24,0 22,0 C 19,0 16,3 14,4 Z"
  106.             style="fill: #FFE9C1; stroke: #B20000"/>
  107.     </svg>
  108.     </p>
  109.   </li>
  110. </ul>
  111. <ul>
  112.   <li>eingelagertes HTML-Fragment (<code>foreignObject</code>)
  113.     <p><svg xmlns="http://www.w3.org/2000/svg" width="6cm" height="57px">
  114.       <rect y="0" x="7px" width="140px" height="45px" style="fill: #C1FFFF"
  115.             stroke="#c1ffff"/>
  116.       <foreignObject width="140px" y="0" x="20px">
  117.  
  118.         <div xmlns="http://www.w3.org/1999/xhtml">
  119.         <ul>
  120.           <li>erstes Element</li>
  121.           <li>zweites Element</li>
  122.         </ul>
  123.         </div>
  124.       </foreignObject>
  125.     </svg>
  126.     </p>
  127.   </li>
  128.   <li>Text (<code>text</code>)
  129.     <p><svg xmlns="http://www.w3.org/2000/svg" width=".10.5cm" height="1cm">
  130.       <text y="20px" x="-1px"
  131.             style="font-family: helvetica; font-size: 12pt; fill: #0000B2"
  132.             stroke="#000000">Zeichenkette in SVG
  133.       </text>
  134.     </svg>
  135.     </p>
  136.   </li>
  137. </ul>
  138.  
  139. <h2>Eine Grafik mit der Palette erzeugen</h2>
  140.  
  141. <p>Befindet sich eine Markierung innerhalb der Struktur eines HTML-Elements
  142. und wΣhlt man ein neues SVG-Gebilde, so generiert Amaya am Anfang des
  143. markierten HTML-Elements ein neues SVG-Element und fⁿgt das Grafikgebilde
  144. dort ein. Amaya generiert SVG-Gebilde als Bl÷cke zwischen HTML-AbsΣtzen. Um
  145. eine Grafik inline anzuzeigen, muss man diese zwischen zwei AbsΣtzen erzeugen
  146. und dann den Quellcode editieren, um diese zu verschieben.</p>
  147.  
  148. <p>Ist das markierte Element ein SVG-Element, dann wird das neue Gebilde
  149. diesem Element an dessem Ende hinzugefⁿgt und kann daher das vorhergehende
  150. ⁿberlagern.</p>
  151.  
  152. <p>Die Erzeugung eines Gebildes verlangt eine Interaktion mit dem
  153. Benutzer:</p>
  154. <ul>
  155.   <li><strong>Rechteck</strong>: die linke, obere Ecke wir durch Drⁿcken der
  156.     linken Maustaste markiert, die Maus wird bei gedrⁿckter linker Taste an
  157.     die rechte untere Ecke gezogen und dann losgelassen. Damit ist das
  158.     Gebilde definiert.</li>
  159.   <li><strong>Kreis</strong> oder <strong>Ellipse</strong>: der Mittelpunkt
  160.     wird durch Drⁿcken der linken Maustaste markiert. Die Maus wird bei
  161.     gedrⁿckter linker Maustaste nach rechts oder unten gezogen, bis die Gr÷▀e
  162.     des Gebildes erreicht ist und die Maustaste wird losgelassen.</li>
  163.   <li>Bei einem offenen oder geschlossenen <strong>Polygon</strong> werden
  164.     die einzelnen Punkte mit der linken Maustaste gesetzt. Der letzte Punkt
  165.     wird mit der rechten Maustaste gesetzt.</li>
  166. </ul>
  167.  
  168. <h2>Andere Elemente einfⁿgen</h2>
  169.  
  170. <p>Man kann in eine SVG-Grafik ein Bild einfⁿgen: aus dem Menⁿ
  171. <strong>Element</strong> den Befehl <strong>Bild</strong> wΣhlen oder den
  172. Knopf <strong>Bild</strong><img alt="Knopf Bild"
  173. src="../../images/image_button.gif" /> in der Knopfleiste anklicken und in
  174. der gleichen Weise verfahren, wie man das in HTML auch macht.</p>
  175.  
  176. <p>Um einen mathematischen Ausdruck in eine SVG-Zeichnung einzufⁿgen, muss
  177. man die Zeichnung markieren und das entsprechende Objekt aus der Palette
  178. Mathematik (<strong>Formel</strong> im Menⁿ <strong>Elemente</strong> oder
  179. Knopf <strong>Formel</strong> <img alt="Knopf Formel"
  180. src="../../images/Math.gif" /> in der Knopfleiste) wΣhlen. Amaya generiert
  181. dann ein <code>foreignObject</code><span class="Note">um das Element
  182. einzufⁿgen.</span></p>
  183.  
  184. <p class="Note"><strong>Hinweis</strong>: Der Knopf Group in der Palette
  185. gruppiert meherere markierte Elemente zu einem Gebilde.</p>
  186. </div>
  187. </body>
  188. </html>
  189.